<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    html,
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      background-color: burlywood;
    }
  </style>
  <body>
    <div style="background-color: bisque">
      this is panel2
      <br />
      updatedata:
      <strong id="updatedata"></strong>
      <br />
      eventdata:
      <strong id="eventdata"></strong>
      <br />
      <a href="javascript:triggerEvent()">交互事件</a>
    </div>

    <script>
      var root = window.parent;

      root.registerUpdateHandler("panel2", (data) => {
        document.getElementById("updatedata").innerText = JSON.stringify(data);
        root.trigger("panel2", "event21", {
          msg: "panel2 update",
          time: new Date(),
        });
      });

      root.subscribeEvent("panel1", "event1", (data) => {
        document.getElementById("eventdata").innerText = JSON.stringify(data);
      });

      function triggerEvent() {
        root.trigger("panel2", "event2", {
          msg: "event from panel2",
          time: new Date(),
        });
      }

      //   setInterval(() => {
      //     root.trigger("panel2", "event2", {
      //       msg: "event from panel2",
      //       time: new Date(),
      //     });
      //   }, 1000);
    </script>
  </body>
</html>
